<template>
  <div>
    <FormItem prop="code" v-if="!slideverify">
      <Row>
        <Col span="15">
          <Input type="text" v-model="selfValue" placeholder="请输入验证码">
            <span slot="prepend">
              <img :src="icon3" style="width: 14px;height: 14px;">
            </span>
          </Input>
        </Col>
        <Col span="7" offset="2">
          <img
            v-if="selfSrc"
            :src="selfSrc"
            style="line-height: 0px; width: 100%; height: 35px"
            @click="updateCode"
          />
        </Col>
      </Row>
    </FormItem>
    <Modal
      v-if="slideverify"
      v-model="selfShowSlider"
      :styles="{ top: '30%' }"
      width="360"
      footer-hide
      :closable="false"
    >
      <vue2verify
        @success="success"
        :mode="'fixed'"
        :captchaType="'blockPuzzle'"
        :imgSize="{ width: '330px', height: '155px' }"
        ref="verify"
      ></vue2verify>
    </Modal>
  </div>
</template>

<script>
import { getCodeImg } from '../../../api/user'
import icon3 from '../../../assets/images/icon3.png'
import vue2verify from '../verifition/Verify'
// 验证码组件，供登录使用
export default {
  name: 'verify',
  model: {
    prop: 'value',
    event: 'input'
  },
  components: { vue2verify },
  props: {
    value: {
      type: String,
      default: () => {
        return ''
      }
    },
    content: {
      type: String,
      default: () => {
        return ''
      }
    },
    slideverify: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    maxWidth: {
      type: String,
      default: () => {
        return '400'
      }
    },
    showSlider: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      icon3,
      selfValue: this.value,
      selfSrc: '',
      selfShowSlider: this.showSlider,
      verifyResult: false
    }
  },
  async mounted () {
    if (!this.slideverify) {
      let result = await getCodeImg()
      this.selfSrc = result.data.data
    }
  },
  watch: {
    selfValue (val) {
      this.$emit('input', val)
    },
    showSlider (val) {
      this.selfShowSlider = val
    },
    selfShowSlider (val) {
      if (!val) {
        // 刷新滑动验证码
        this.$refs.verify.refresh()
      }
      this.$emit('changeShowSlider', val)
    }
  },
  methods: {
    success (params) {
      this.selfShowSlider = false
      this.verifyResult = true
      // params 返回的二次验证参数, 和登录参数一起回传给登录接口，方便后台进行二次验证
      this.$emit('onSuccessVerify', params.captchaVerification)
    },
    async updateCode () {
      let result = await getCodeImg()
      this.selfSrc = result.data.data
    }
  }
}
</script>

<style scoped>
</style>
